/**
 * 上传文件预览的table
 * @author tongsitong
 */

import icon_empty from "@/assets/icons/icon-empty.png";
import { useEffect, useState } from "react";
import styled from "styled-components";
import warningIcon from "@/assets/icons/icon-warning.png";
import { Popover } from "antd";

export const PreviewTable = (props) => {
  const [activeDateIndex, setActiveDateIndex] = useState(0); // 选中的日期index
  const [localEmptyVisible, setLocalEmptyVisible] = useState(false); // 组件内变量
  const [localExcelContent, setLocalExcelContent] = useState([]); // 组件内变量

  const changeDate = (index: number) => {
    setActiveDateIndex(index);
    console.log(index);
    // TODO set children
  };
  useEffect(() => {
    setLocalEmptyVisible(props.emptyVisible);
    if (props.emptyVisible) {
      setActiveDateIndex(0);
    }
  }, [props.emptyVisible]);

  useEffect(() => {
    setLocalExcelContent(props.excelContent);
  }, [props.excelContent]);

  return (
    <Wrapper isError={props.isError} style={props.style} className={props.className}>
      {localEmptyVisible ? (
        <PreviewEmpty />
      ) : (
        <FlexStart>
          <DateList>
            {localExcelContent.map((item, index) => (
              <DateLine
                active={activeDateIndex == index}
                exceptionFlag={item.exceptionFlag}
                onClick={() => changeDate(index)}
              >
                {item.positionDate}
              </DateLine>
            ))}
          </DateList>
          <TableWrapper>
            <DisplayTable>
              <Tr>
                <Th></Th>
                <Th minWidth={150}>产品名称</Th>
                <Th pr={24}>产品代码</Th>
                <Th align="right" minWidth={100} pr={30}>
                  组合权重
                </Th>
                <Th>备注</Th>
              </Tr>
              {localExcelContent[activeDateIndex]?.children.map(
                (product, i) => (
                  <Tr>
                    <Td pl={8} maxWidth={25} pr={8}>
                      {product.exceptionFlag === "1" && (
                        <Popover
                          key={i}
                          placement="bottom"
                          overlayClassName="popoverDarkStyle"
                          content={"产品代码无法解析" as React.ReactNode}
                        >
                          <img src={warningIcon} />
                        </Popover>
                      )}
                    </Td>
                    <Td pr={24}>{product.productName}</Td>
                    <Td pr={24}>{product.productCode}</Td>
                    <Td align="right" minWidth={100} pr={30}>
                      {product.weight}
                    </Td>
                    <Td pr={10}>
                      {product.remark}
                    </Td>
                  </Tr>
                ),
              )}
            </DisplayTable>
          </TableWrapper>
        </FlexStart>
      )}
    </Wrapper>
  );
};

const Wrapper = styled.div`
  background: #ffffff;
  border: 1px solid ${(props)=> props.isError ? "#E64A00" : "#e4e4e4"};
  border-radius: 0 2px 2px 2px;
  height: 310px;
  width: 100%;
`;

const Content = ({ className, style, title }) => (
  <div className={className} style={style}>
    <img src={icon_empty} alt="没有数据" />
    <LightText>{title || "暂无数据"}</LightText>
  </div>
);

export const PreviewEmpty = styled(Content)`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-direction: column;

  > img {
    width: 186px;
    height: 127px;
  }
`;

export const LightText = styled.div`
  opacity: 0.4;
  font-size: 13px;
  color: #4a5774;
`;

export const FlexStart = styled.div`
  display: flex;
  align-items: flex-start;
  padding: 8px;
`;

export const DateList = styled.div`
  height: ${(props) => props.height || 294}px;
  /* width: 125px; */
  min-width: 105px;
  width: 16.7%;
  background: #f5f6f8;
  /* margin: 8px; */
  margin-right: 8px;
  padding: 9px 0 9px 6px;
  overflow-y: overlay;
  .date_line {
    height: 25px;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
    &.active {
      background: #fff;
    }
  }
`;

export const DateLine = styled.div`
  height: 25px;
  text-align: center;
  line-height: 25px;
  cursor: pointer;
  color: ${(props) =>
    props.active ? props?.activeColor || "#1F51A4" : "#35425E"};
  background: ${(props) => (props.active ? "#fff" : "transparent")};
  font-weight: 600;
  padding-right: 7px;
  &:before {
    content: " ";
    width: 4px;
    height: 4px;
    background: #ee4923;
    display: inline-block;
    border-radius: 4px;
    vertical-align: middle;
    margin: 0 4px;
    visibility: ${(props) => (props.exceptionFlag ? "visible" : "hidden")};
  }
`;

export const TableWrapper = styled.div`
  /* margin: 8px 8px 8px 0; */
  /* width: 100%; */
  /* width: 83%; */
  overflow-y: overlay;
  height: ${(props) => props.height || 294}px;
  width: 100%;
`;
export const DisplayTable = styled.table`
  /* display: table; */
  border-collapse: collapse;
  width: 100%;
`;

export const Tr = styled.tr`
  /* display: table-row; */
  height: 30px;
  background: #f5f6f8;
  border-radius: 2px;
  &:not(:first-child) {
    border-top: 8px solid #fff;
  }
  &:hover {
    background: #e5f0ff;
  }
`;

export const Th = styled.th`
  /* display: table-cell; */
  font-weight: bold;
  height: 100%;
  text-align: ${(props) => (props.align ? props.align : "left")};
  vertical-align: middle;
  background: #edf0f5;
  border-radius: 2px;
  color: #35425e;
  padding-left: ${(props) => props.pl + "px" || 0};
  padding-right: ${(props) => props.pr + "px" || 0};
  /* &:first-child {
    padding-left: 30px;
  }
  &:last-child {
    padding-right: 30px;
  } */
`;

export const Td = styled.td`
  display: ${(props) => props.display || "table-cell"};
  height: 100%;
  min-width: ${(props) => (props.minWidth || 0) + "px"};
  /* max-width: ${(props) => (props.maxWidth || 280) + "px"}; */
  text-align: ${(props) => props.align || "left"};
  font-weight: ${(props) => props.weight || 400};
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #35425e;
  padding-left: ${(props) => (props.pl || 0) + "px"};
  padding-right: ${(props) => (props.pr || 0) + "px"};
  span {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  > img {
    display: block;
    width: 13px;
    height: 11px;
  }
`;
